<template>
	<div class="container">
		<!-- 卡片视图 -->
		<el-card>
			<!-- 筛选区 -->
			<el-form ref="searchForm" :rules="ruleForm" :model="searchForm" label-width="80px">
				<el-row class="formDiv">
					<!-- 筛选条件区 -->
					<el-col :span="8" :offset="3">
						<el-form-item label="机构编号:" prop="Pst_Blng_InsID">
							<el-input v-model="searchForm.Pst_Blng_InsID"></el-input>
						</el-form-item>
						<el-form-item label="对私条线:" prop="Prvt_Cst_Line_TpCd">
							<el-input v-model="searchForm.Prvt_Cst_Line_TpCd"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="2">
						<el-form-item label="员工编号:" prop="CCB_EmpID">
							<el-input v-model="searchForm.CCB_EmpID"></el-input>
						</el-form-item>
						<el-form-item label="员工姓名:" prop="EMPE_NM">
							<el-input v-model="searchForm.EMPE_NM"></el-input>
						</el-form-item>
					</el-col>

					<!-- 按钮区 -->
					<el-col class="buttonDiv" :span="24">
						<el-button type="success" @click="search()" style="width: 90px;">查询mock</el-button>
						<el-button type="success" @click="searchTest()" style="width: 90px;">查询P8</el-button>
						<el-button @click="reset()" style="width: 90px;">重置筛选</el-button>
						<el-button type="success" @click="getUserInfo()">查询微信用户(测)</el-button>
					</el-col>
				</el-row>
			</el-form>
			<!-- 筛选区结束 -->
			<!-- 表格区 -->
			<div class="tableDiv">
				<div>请求：{{searchForm}}</div>
				<div class="actionDiv">
					<el-button type="primary" @click="updateEmpInfo()">同步到微信</el-button>
					<el-button type="warning" @click="addDialogVisible=!addDialogVisible">添加员工</el-button>
				</div>
				<!-- 表格开始 -->
				<el-table :data="listData" border show-overflow-tooltip tooltip-effect="dark" stripe @selection-change="handleSelectionChange"
				 v-loading="tableLoading" style="width: 100%" max-height="400px">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="CCB_EmpID" label="员工编号">
					</el-table-column>
					<el-table-column prop="EMPE_NM" label="员工姓名">
					</el-table-column>
					<el-table-column prop="Best_Ctc_Tel" label="电话号码">
					</el-table-column>
					<el-table-column prop="PID" label="岗位编号">
					</el-table-column>
					<el-table-column prop="Pst_Nm" label="岗位名称">
					</el-table-column>
					<el-table-column prop="Pst_Blng_InsID" label="机构编号">
					</el-table-column>
					<el-table-column prop="Pst_Blng_Inst_Nm" label="机构名称">
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" content="编辑员工" :enterable="false" placement="top">
								<el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editEmp(scope.row)"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchForm.nowPage"
					 :page-size="pageSize" layout="total, prev, pager, next" :total="totalRow">
					</el-pagination>
				</div>
				<div>选择的数据：{{multipleSelection}}</div>
			</div>
			<!-- 表格区结束 -->


			<!-- 下面是弹出层 -->
			<!-- 添加对话框 -->
			<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
				<el-form :model="addUserForm" ref="addUserFormRef" :rules="addUserFormRules" label-width="100px">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="addUserForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="addUserForm.password"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="addUserForm.email"></el-input>
					</el-form-item>
					<el-form-item label="手机" prop="mobile">
						<el-input v-model="addUserForm.mobile"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addUser">添 加</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>
<script>
	import api from '@/api/api.js'
	export default {
		data() {
			// 自定义邮箱规则
			var checkEmail = (rule, value, callback) => {
				const regEmail = /^\w+@\w+(\.\w+)+$/
				if (regEmail.test(value)) {
					// 合法邮箱
					return callback()
				}
				callback(new Error('请输入合法邮箱'))
			}
			// 自定义手机号规则
			var checkMobile = (rule, value, callback) => {
				const regMobile = /^1[34578]\d{9}$/
				if (regMobile.test(value)) {
					return callback()
				}
				// 返回一个错误提示
				callback(new Error('请输入合法的手机号码'))
			}
			return {
				searchForm: {
					nowPage: 1,
					Pst_Blng_InsID: '',
					CCB_EmpID: '',
					EMPE_NM: '',
					Prvt_Cst_Line_TpCd: '01'
				},
				pageSize: 15,
				totalRow: 0,
				ruleForm: {},
				listData: [],
				tableLoading: false, //是否正在加载
				multipleSelection: [], //选择的数据
				addDialogVisible: false, //添加层是否显示
				addUserForm: {
					username: '',
					password: '',
					email: '',
					mobile: ''
				},
				// 添加表单验证规则
				addUserFormRules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '用户名的长度在2～10个字',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入用户密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 18,
							message: '用户密码的长度在6～18个字',
							trigger: 'blur'
						}
					],
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						}
					],
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						}
					]
				},

			}
		},
		methods: {
			getUserInfo(){
				let data={"userid":"AnMaNeBaMiOu"}
				api.getUserInfo(data).then(function(resp){
					console.log(resp)
					alert(JSON.stringify(resp))
				}).catch(resp=>{
					console.log(resp)
				})
			},
			searchTest(){
				let json={
					"SYS_TX_CODE":"A1161T269",
					"SYS_TX_SCEN":"A1161T269_1",
					"TXN_INSID":"510103761",
					"TXN_STFF_ID":"08033026",
					"PAGE_JUMP":"1",
					"REC_IN_PAGE":"20",
					"Data":{
						// "Cst_And_Empe_ReTpCd":"0970012",
						// "EmpID":"08033026"
						// "Prvt_Cst_Line_TpCd":"01",
						// "CCBIns_ID":"111111111",
						// "Dfalt_Shw_Scop_Ind":"2",
						// "StaGRP":[{"Prim_PID":"G00000000004"}]
						"InsID":"510103761",
						"Enqr_Ind":"3"
					}
				}
				api.testP8request(json).then(res=>{
					console.log('返回数据：')
					console.log(res)
				}).catch(res=>{
					console.log('出错了：')
					console.log(res)
				})
			},
			search() { //查询数据
				let vm = this
				vm.tableLoading = true
				api.getEmplist().then(function(response) {
					console.log(response.data)
					vm.listData = response.data.entity.list
					vm.totalRow = response.data.head.commonB.TOTAL_REC
					vm.tableLoading = false
				})
			},
			reset() { // 重置查询条件和数据
				this.$refs['searchForm'].resetFields()
				this.listData = []
				this.searchForm.nowPage = 1
				this.totalRow = 0
			},
			handleSelectionChange(val) { //选择表格数据
				this.multipleSelection = val
			},
			updateEmpInfo() { //将选择的员工同步到微信
				// let str = this.multipleSelection.reduce((r, now) => {
				// 	r = r + now.EMPE_NM + ','
				// 	return r
				// }, '')
				this.$confirm('同步以下数据到企业微信：' + JSON.stringify(this.multipleSelection), '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '已发送给企业微信进行同步'
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消同步'
					})
				})
			},
			handleSizeChange(size) { //每页显示条数改变
				this.pageSize = size
				this.searchForm.nowPage = 1
				this.search()
			},
			handleCurrentChange(page) { //跳到第几页
				this.nowPage = page
				this.search()
			},
			editEmp(row) { //修改表格哪一行
				alert(JSON.stringify(row))
			},
			addDialogClosed() { //关闭添加层后的回调
				this.$refs.addUserFormRef.resetFields()
			},
			addUser() { //添加用户
				this.$refs.addUserFormRef.validate(async valid => {
					if (!valid) return
					this.$message.success('添加用户成功！')
					// 隐藏添加用户对话框
					this.addDialogVisible = false
					this.search()
				})
			}
		},
		async mounted() {}
	}
</script>
<style lang="less" scoped>
	.formDiv {
		padding: 20px;
		border-bottom: 1px solid #666;

		.buttonDiv {
			display: flex;
			justify-content: center;
		}
	}

	.tableDiv {
		padding: 20px;

		.actionDiv {
			padding: 20px 0;
		}

		.pagination {
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>
